<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/common/header.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/css/ajaxfileupload.css">
<script type="text/javascript" src="${ctx}/js/ajaxfileupload.js"></script>
<script type="text/javascript">
var time = 0;
function ajaxFileUpload()
{
   /*  $("#p").ajaxStart(function(){
        $(this).show();
    }).ajaxComplete(function(){
        //$(this).hide();
    }); */
   
    $("#p").show().progressbar('setValue', 0);     
    time = window.setInterval(progress,1000);
    
    $.ajaxFileUpload({
            url:'${ctx}/system/fileUpload.action',
            secureuri:false,
            files:'files',//根据名称支持多文件上传
            dataType: 'json',
            data:{name:'logan', id:'id'},
            success: function (data, status){
                alert(data.result);
                $("#p").hide();
            },
            error: function (data, status, e)
            {
                alert(e);
                $("#p").hide();
            }
        }
    )
    
    function progress(){  
        $.ajax({  
            url:"${ctx}/system/getUploadProgress.action",  
            dataType: 'json',  
            success:function(data){  
                //alert(data.stateProgress.rate);  
                $('#p').progressbar('setValue', data.stateProgress.rate);
                if(data.stateProgress.rate == 100){  
                    clearInterval(time);  
                }  
            },  
            error:function(){  
            	clearInterval(time);
                alert("error");  
            }  
        });  
    }  
}
</script>
<title>upload</title>
</head>
<body>
 <div id="wrapper">
    <div id="content">
        <h1>Ajax File Upload Demo</h1>
        <p>Jquery File Upload Plugin  - upload your files with only one input field</p>
        need any Web-based Information System?<br> Please <a href="http://www.phpletter.com/">Contact Us</a><br>
        We are specialized in <br>
        <ul>
            <li>Website Design</li>
            <li>Survey System Creation</li>
            <li>E-commerce Site Development</li>
        </ul>       
        <img id="loading" src="loading.gif" style="display:none;">
        <form name="form" action="" method="POST" enctype="multipart/form-data">
        <table cellpadding="0" cellspacing="0" class="tableForm">
	        <thead>
	            <tr>
	                <th>Please select a file and click Upload button</th>
	            </tr>
	        </thead>
            <tbody> 
                <tr>
                    <td>
                        <input id="fileToUpload1" type="file" size="45" name="files" class="input">
                    </td>          
                </tr>
                <tr>
                    <td>
                        <input id="fileToUpload2" type="file" size="45" name="files" class="input">
                    </td>          
                </tr>
                <tr>
                    <td>
                        <input id="fileToUpload3" type="file" size="45" name="files" class="input">
                    </td>          
                </tr>
            </tbody>
        </table>
        </form>   
        <button class="button" id="buttonUpload" onclick="ajaxFileUpload();">Upload</button>  
    </div>
    
    <h2>Basic ProgressBar</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click the button below to show progress information.</div>
    </div>
    <div style="margin:10px 0;">
        <a href="#" class="easyui-linkbutton" onclick="start()">Start</a>
    </div>
    <div id="p" class="easyui-progressbar" style="width:400px;display: none;"></div>
    <script>
        function start(){
            var value = $('#p').progressbar('getValue');
            if (value < 100){
                value += Math.floor(Math.random() * 10);
                $('#p').progressbar('setValue', value);
                setTimeout(arguments.callee, 200);
            }
        };
    </script>
</body>
</html>